<h2>{{defaultConfig.name}}</h2>
<ng-container [ngSwitch]="editmode">
  <ng-template ngSwitchCase="list">
    <test-modal #viewModal titleName='OID Conditions'></test-modal>
    <test-modal #viewModalDelete titleName='Deleting:' [customMessage]="['Deleting this OID Condition will affect the following components','Deleting this OID Condition will NOT affect any component. Safe delete']" [customMessageClass]="['alert alert-danger','alert alert-success']"
        [showValidation]="true" [textValidation]="'Delete'" [controlSize]="true" (validationClicked)="deleteOidCondition($event)">
    </test-modal>
    <export-file-modal #exportFileModal [showValidation]="true" [exportType]="defaultConfig['slug']" [textValidation]="'Export'" titleName='Exporting:'></export-file-modal>
    <table-list #listTableComponent [typeComponent]="defaultConfig['slug']" [data]="data" [columns]="defaultConfig['table-columns']" [counterItems]="counterItems" [counterErrors]="counterErrors" [selectedArray]="selectedArray" [isRequesting]="isRequesting" [tableRole]="tableRole"
    [roleActions]="overrideRoleActions" (customClicked)="customActions($event)"></table-list>
  </ng-template>

  <ng-template ngSwitchDefault>
    <form [formGroup]="oidconditionForm" class="form-horizontal" (ngSubmit)="editmode === 'create' ? saveOidCondition() : updateOidCondition()">
      <ng-container>
  			<div class="row well well-sm">
  				<h4 style="display:inline">
  				<i class="glyphicon glyphicon-cog text-info"></i> {{ editmode | uppercase}}
  			</h4>
  			<div class="pull-right" style="margin-right: 20px">
          <div style="display:inline" tooltip='Submit' container=body><button class="btn btn-success" type="submit" [disabled]="!oidconditionForm.valid"> <i class="glyphicon glyphicon-ok-circle"></i></button></div>
          <div style="display:inline" tooltip='Reset' container=body><button class="btn btn-warning" type="reset" [disabled]="!oidconditionForm.dirty"><i class="glyphicon glyphicon-ban-circle"></i> </button></div>
          <div style="display:inline" tooltip='Cancel' container=body><button class="btn btn-danger" type="button" (click)="cancelEdit()"><i class="glyphicon glyphicon-remove-circle"></i></button></div>
  			</div>
  		</div>
  	</ng-container>
  	<div class="form-fixed-height">

  			<div class="well well-sm">
  	      <span class="editsection">
  	        Basic Settings
  	      </span>
  	      <div class="form-group" style="margin-top: 25px">
        <label class="control-label col-sm-2" for="ID">ID</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Unique metric identifier"></i>
        <div class="col-sm-9">
          <input formControlName="ID" id="ID" [ngModel]="oidconditionForm.value.ID"/>
          <control-messages [control]="oidconditionForm.controls.ID"></control-messages>
        </div>
      </div>

      <div class="form-group">
        <label class="control-label col-sm-2" for="IsMultiple">Is Multiple</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Full OID or base OID (if indexed) of Condition query"></i>
        <div class="col-sm-9">
          <select formControlName="IsMultiple" id="IsMutiple" (click)="setDynamicFields(oidconditionForm.value.IsMultiple, true)" [ngModel]="oidconditionForm.value.IsMultiple">
            <option value="true">(true) This Condition is defined as boolean expresion from other OID conditions</option>
            <option value="false">(false) This condition is defined from an OID --default-- </option>
          </select>
          <control-messages [control]="oidconditionForm.controls.IsMultiple"></control-messages>
        </div>
      </div>
    </div>
      <div class="well well-sm">
        <span class="editsection">
          OID Condition Settings
        </span>
        <div class="form-group" style="margin-top: 25px"  *ngIf="oidconditionForm.controls.OIDCond">
        <label class="control-label col-sm-2" for="OIDCond">{{(oidconditionForm.value.IsMultiple === "true" || oidconditionForm.value.IsMultiple === true) ? 'OID Condition' : 'OID'}}</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Full OID or base OID (if indexed) of Condition query"></i>
        <div class="col-sm-9">
          <input formControlName="OIDCond" id="OIDCond" [ngModel]="oidconditionForm.value.OIDCond" />
          <control-messages [control]="oidconditionForm.controls.OIDCond"></control-messages>
        </div>
      </div>
      <div *ngIf="oidconditionForm.controls.CondType">
        <div class="form-group">
          <label class="control-label col-sm-2" for="CondType">CondType</label>
          <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Select the matching OID Condition"></i>
          <div class="col-sm-9">
            <select formControlName="CondType" id="CondType" [ngModel]="oidconditionForm.value.CondType">
              <option value="match">(match) string regexp match</option>
              <option value="notmatch">(notmatch) string regex match inverse</option>
              <option value="nin">(nin) numeric in (value is one of the CSV values (,;|) list)</option>
              <option value="neq">(neq) numeric equal</option>
              <option value="ndif">(ndif) numeric different (not equal)</option>
              <option value="nlt">(nlt) numeric less than</option>
              <option value="ngt">(ngt) numeric Greater than</option>
              <option value="nge">(nge) numeric Greater or Equal</option>
              <option value="nle">(nle) numeric less or equal </option>
            </select>
            <control-messages [control]="oidconditionForm.controls.CondType"></control-messages>
          </div>
        </div>
        <div class="form-group" *ngIf="oidconditionForm.controls.CondValue">
          <label class="control-label col-sm-2" for="CondValue">CondValue</label>
          <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Value to match the OID Condition"></i>
          <div class="col-sm-9">
            <input formControlName="CondValue" id="CondValue" [ngModel]="oidconditionForm.value.CondValue"/>
            <control-messages [control]="oidconditionForm.controls.CondValue"></control-messages>
          </div>
        </div>
      </div>
    </div>
      <div class="well well-sm">
        <span class="editsection">
          Extra Settings
        </span>
        <div class="form-group" style="margin-top: 25px">
      <div class="form-group">
        <label class="control-label col-sm-2" for="Description">Description</label>
        <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Description of the OID Condition"></i>
        <div class="col-sm-9">
          <textarea class="form-control" style="width: 50%" rows="2" formControlName="Description" id="Description" [ngModel]="oidconditionForm.value.Description"> </textarea>
          <control-messages [control]="oidconditionForm.controls.Description"></control-messages>
        </div>
      </div>
    </div>
    </div>
  </div>
    </form>
  </ng-template>
</ng-container>
